<template>
  <div>
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="关键词：" prop="keyWord">
          <el-input
            placeholder="单位，联系人，电话等"
            v-model="query.keyWord"
          ></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
            >清空</el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
            >搜索</el-button
          >
        </el-form-item>
        <!-- <el-col :span="24">
          <el-form-item>
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              v-no-more-click
              >导出</el-button
            >
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <!-- <el-table-column
        type="selection"
        :reserve-selection="true"
        width="36"
        class-name="checkBox"
      /> -->
      <el-table-column
        prop="currentStages"
        label="期数"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="answerAmount"
        label="应还总额"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="nameq"
        label="应还本金"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="nameq"
        label="应还手续费"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="answerMonth"
        label="应还月"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="answerDay"
        label="应还日"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualMonth"
        label="实还月"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualDay"
        label="实还日"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="overdueStatus"
        label="是否逾期"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldStatus"
        label="扣款状态"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldCode"
        label="扣款码"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldAmount"
        label="实扣总额"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        prop="nameq"
        label="实还本金"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="nameq"
        label="实还手续费"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        prop="applyPerson"
        label="申请扣款人"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="actualTime"
        label="实际扣款时间"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="commissionStatus"
        label="是否计算提成"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="achievementStatus"
        label="是否计算业绩"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getPageContractInfo } from "@/assets/js/api";
export default {
  name: "electronic",
  props: {
    diaId: {
      type: Number,
    },
  },
  data() {
    return {
      query: {
        pageSize: 10,
        pageNo: 1,
        id: null,
        keyWord: "",
      },
      total: 10,
      pages: 0,
      currentPage: 1,
      tableData: [],
      perInfo: {},
    };
  },
  created() {
    this.query.id = this.diaId;
    this.gitList();
  },
  methods: {
    //清空按钮!
    clearFun() {
      this.query.pageNo = 1;
      this.query.keyWord = "";
      this.gitList();
    },
    // 搜索按钮!
    queryFun() {
       this.query.pageNo = 1;
      this.gitList();
    },
    // 获取数据
    gitList() {
      getPageContractInfo(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.gitList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.gitList();
    },
  },
};
</script>

<style scoped type="less">
.content
{
    font-size: 14px;  margin: 20px 0;  text-align: left;
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;  margin-top: 20px;
}
::v-deep .el-pagination__total
{
    visibility: hidden;
}
.title
{
    font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1);
}


</style>
